<script setup lang="ts">
  import DynamicForm from '@/components/common/dynamicForm/DynamicForm.vue';
  import { DynamicFormOption, DynamicItem, DynamicSelectOption } from '@/components/types';
  import { useLocale } from '@/locales/useLocale';
  import { IUpdateUserinfoParam } from '@/api/types';
  import { useMobile } from '@/hooks/core/useMobile';
  import { computed, markRaw, ref } from 'vue';
  import { useUserinfoStore } from '@/store/module/useUserStore';
  import { ElMessageBox } from 'element-plus';
  const { t } = useLocale();
  const loading = ref(false);
  const userStore = useUserinfoStore();
  const schema = {
    address: '',
    clinicId: '',
    email: 'email',
    idCard: '',
    occupation: '',
    personName: '',
    sex: '',
    tel: '',
  };
  // const initValues: IUpdateUserinfoParam = markRaw(userStore.$state);
  const initValues = { ...userStore.$state };
  const updateUserinfoFormOption = [
    {
      is: DynamicItem.INPUT,
      name: 'personName',
      label: 'message.sys.userinfo.personName',
    },
    {
      is: DynamicItem.RADIO,
      name: 'sex',
      label: 'message.sys.userinfo.sex',
      options: [
        {
          value: '男',
          label: '男',
        },
        {
          value: '女',
          label: '女',
        },
      ],
    },
    {
      is: DynamicItem.INPUT,
      name: 'idCard',
      label: 'message.sys.userinfo.idCard',
    },
    {
      is: DynamicItem.INPUT,
      name: 'tel',
      label: 'message.sys.login.mobile',
    },
    {
      is: DynamicItem.INPUT,
      name: 'address',
      label: 'message.sys.userinfo.address',
    },
    {
      is: DynamicItem.INPUT,
      name: 'occupation',
      label: 'message.sys.userinfo.occupation',
    },
    {
      is: DynamicItem.INPUT,
      name: 'email',
      label: 'message.sys.login.email',
    },
    {
      is: DynamicItem.INPUT,
      name: 'clinicId',
      label: 'message.sys.userinfo.clinicId',
    },
  ] as DynamicFormOption[];
  const onSubmit = (values: IUpdateUserinfoParam) => {
    ElMessageBox.confirm(
      t('message.sys.profile.reviseInfoMessage'),
      t('message.sys.profile.reviseInfo'),
      {
        confirmButtonText: t('message.common.okText'),
        cancelButtonText: t('message.common.cancelText'),
      }
    ).then(() => {
      loading.value = true;
      userStore.updateUserinfo(values, (isSuccess: boolean) => {
        loading.value = false;
      });
    });
  };
  const isMobile = useMobile();
  const size = computed(() => {
    return isMobile.value ? 'default' : 'large';
  });
</script>

<template>
  <DynamicForm
    as="ElForm"
    :validation-schema="schema"
    :initialValues="initValues"
    label-width="120px"
    :label-position="isMobile ? 'top' : 'right'"
    :options="updateUserinfoFormOption"
    @on-submit="onSubmit"
    animate-class="''"
    :size="size"
    submit-content="message.sys.login.updateUserinfoButton"
  />
</template>

<style lang="scss"></style>
